<template>
  <div class="music">
    <audio ref="audio" controls hidden src="../../../../public/music/jingzhi.mp3"/>
    <img class="hand music-img" @click="playMusic" src="../../../assets/image/music.png"
         :class="isPlay ? 'rui-rotate':'rui-rotate-stop'"/>
  </div>
</template>

<script setup>
import {ref} from "vue";
const isPlay = ref(false);
let audio = ref()
//播放
let playMusic = () => {
  isPlay.value = !isPlay.value
  isPlay.value ? audio.value.play() : audio.value.pause()
}
// 父调子暴露方法
defineExpose({
  playMusic
});
</script>

<style lang="scss" scoped>
.music {
  position: fixed;
  right: 10px;
  top: 10px;
  user-select: none;

  .music-img {
    border-radius: 50%;
    width: 20px;
    height: 20px;
  }

  .rui-rotate-stop {
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }

  .rui-rotate {
    animation: audio-rotate 2s linear infinite;
    -webkit-animation: audio-rotate 2s linear infinite;
  }

  @keyframes audio-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @-webkit-keyframes audio-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

}


</style>
